<template>
  <div class="tenant">
    <div class="wrapper">
      <div class="search">
        <div class="add" @tap="addClick">
          <div class="addBtn">
            <text>添加</text>
          </div>
          <viex class="icon">
            <div class="iconfont icon-jia"></div>
          </viex>
        </div>
        <div class="write">
          <i-icon
            class="icon"
            color="rgb(106, 106, 106)"
            size="20"
            type="search" />
          <input
            v-model="searchValue"
            left
            class="input"
            placeholder-style="color: rgb(197, 197, 197);"
            type="text"
            placeholder="搜索手机号" />
        </div>
      </div>

      <div class="list">
        <div
          v-for="(item, index) in listFilter"
          :key="item.id"
          class="detail">
          <i-swipeout
            :operateWidth="60"
            :unclosable="false"
            :toggle="false">
            <div class="list-swipeout" slot="content" @tap="detailClick(item)">
              <div class="img">
                <image src="/static/img/unlogin.png" alt="" />
              </div>
              <div class="info">
                <div class="title">{{item.rentorName}}</div>
                <div class="local">{{item.rentorPhone}}</div>
              </div>
            </div>
            <div
              slot="button"
              class="detail-btn">
              <div class="btn" @tap="detailDelete(item)">删除</div>
            </div>
          </i-swipeout>
        </div>
      </div>

      <div class="loadingMore">
        <i-load-more v-if="isLoadingMore" />
        <div
          v-if="isNoMoreData"
          class="noMoreData">没有更多数据了</div>
      </div>

      <i-action-sheet
        show-cancel
        :mask-closable="false"
        :visible="actionVisible"
        :actions="actionDetail"
        @cancel="actionCancel"
        @sure="actionSure">
        <div slot="header" style="padding: 16px">
          <div style="color: #444;font-size: 16px">确定吗？</div>
          <text>删除后无法恢复哦</text>
        </div>
      </i-action-sheet>

      <i-message id="message" />

    </div>
  </div>
</template>

<script>
import { $Message } from '../../../static/iview/base/index'
import { mapMutations } from 'vuex'
import { ERR_OK, pageSize } from 'api/config'
import { getList, delList } from 'api/tenant'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  computed: {
    listFilter () {
      let arr = []
      if (this.searchValue) {
        arr = this.list.filter(item => item.rentorPhone.indexOf(this.searchValue) > -1)
      } else {
        arr = this.list
      }

      return arr
    }
  },
  onShow () {
    this.page = 1
    this.getList('init', true)
  },
  onPullDownRefresh () {
    this.page = 1
    this.getList('init', false)
  },
  onReachBottom () {
    this.getMoreList()
  },
  mounted () {
    this.initData()
  },
  data () {
    return {
      searchValue: '',
      page: 1,
      list: [],
      isLoadingMore: false,
      isNoMoreData: false,
      actionVisible: false,
      actionDetail: [
        {
          name: '删除',
          color: '#ed3f14',
          loading: false
        }
      ]
    }
  },
  methods: {
    initData () {
      this.searchValue = ''
      this.isNoMoreData = false
      this.list = []
    },
    actionSure (detail) {
      if (this.actionDetail[0].loading) {
        return
      }
      this.delList(this.deleteId)
    },
    actionCancel () {
      if (this.actionDetail[0].loading) {
        return
      }
      this.actionVisible = false
    },
    addClick () {
      this.SET_ACTIONKEY('add')
      wx.navigateTo({
        url: '/pages/tenantDetail/main'
      })
    },
    detailClick (item) {
      this.SET_CURRENTITEM(item)
      this.SET_ACTIONKEY('edit')
      wx.navigateTo({
        url: '/pages/tenantDetail/main'
      })
    },
    detailDelete ({ id }) {
      this.actionVisible = true
      this.deleteId = id
    },
    getMoreList () {
      if (this.isNoMoreData) {
        return
      }
      this.isLoadingMore = true
      this.page += 1
      this.getList('more', false)
    },
    async delList (id) {
      this.actionDetail[0].loading = true

      const res = await delList(id)

      this.actionDetail[0].loading = false
      this.actionCancel()

      if (res.code === ERR_OK) {
        const deleteIndex = this.list.findIndex(item => item.id === id)
        this.list.splice(deleteIndex, 1)
        $Message({
          content: '删除成功！',
          type: 'success'
        })
      } else {
        $Message({
          content: '删除失败',
          type: 'error'
        })
      }
    },
    async getList (type = 'init', isShowLoading = true) {
      if (isShowLoading) {
        this.$showLoading('加载中')
      }

      const res = await getList(this.page)

      if (isShowLoading) {
        wx.hideLoading()
      } else {
        wx.stopPullDownRefresh()
      }

      if (res.code === ERR_OK) {
        if (type === 'init') {
          this.list = res.rows
          this.isNoMoreData = false
          this.isLoadingMore = false
        } else if (type === 'more') {
          this.list = [...this.list, ...res.rows]
          this.isLoadingMore = false
        }

        if (res.rows.length < pageSize) {
          this.isNoMoreData = true
        }
      }
    },
    ...mapMutations({
      SET_CURRENTITEM: 'tenantDetail/SET_CURRENTITEM',
      SET_ACTIONKEY: 'tenantDetail/SET_ACTIONKEY'
    })
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .tenant {
    width: 100%;
    height: 100%;
    position: relative;
    > .wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      > .search {
        width: 100%;
        height: 58px;
        display: flex;
        border: 1px solid rgb(229, 229, 229);
        border-left: none;
        border-right: none;
        box-sizing: border-box;
        > .add {
          width: 90px;
          line-height: 56px;
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 5px;
          box-sizing: border-box;
          > .addBtn {
            max-width: e("calc(100% - 20px)");
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          > .icon {
            width: 20px;
            margin-left: 2px;
          }
        }
        > .write {
          flex: 1;
          position: relative;
          > .icon {
            width: 20px;
            line-height: 56px;
            position: absolute;
            left: 9px;
            top: 0;
          }
          > .input {
            width: 97%;
            height: 36px;
            margin-top: 10px;
            padding-left: 34px;
            background-color: rgb(241, 241, 241);
            border-radius: 16px;
            font-size: 14px;
            box-sizing: border-box;
          }
        }
      }
      > .list {
        width: 100%;
        > .detail {
          .list-swipeout {
            display: flex;
            align-items: center;
            > .img {
              flex: 0 0 60px;
              > image {
                width: 40px;
                height: 40px;
              }
            }
            > .info {
              flex: 1;
              color: black;
              > .title {
                font-size: 16px;
              }
              > .local {
                margin: 2px 0;
              }
              > .desc {
                > .status {
                  margin-right: 5px;
                  color: $color-default;
                  &.yes {
                    color: $color-success;
                  }
                  &.no {
                    color: $color-error;
                  }
                  &.remind {
                    color: $color-warning;
                  }
                }
              }
            }
          }
          .detail-btn {
            height: 100%;
            display: flex;
            > .btn {
              flex: 1;
              height: 100%;
              background-color: $color-default;
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }
</style>
